<template>
  <div class="profile">
    <div class="v-title">
      <span>基本信息</span>
      <a slot="extra" @click="$router.push('/user-center/store-edit')">
        编辑首页
      </a>
    </div>

    <div class="desc-wrapper">
      <div class="desc-item">
        <div class="desc-label">单位名称</div>
        <div class="desc-value">{{ account.name }}</div>
      </div>
      <div class="desc-item">
        <div class="desc-label">会员级别</div>
        <div class="desc-value">{{ account.user_level.name }}</div>
      </div>
      <div class="desc-item">
        <div class="desc-label">单位性质</div>
        <div class="desc-value">{{ account.cType }}</div>
      </div>

      <div class="desc-item">
        <div class="desc-label">登录手机</div>
        <div class="desc-value">{{ account.phone }}</div>
      </div>

      <div class="desc-item">
        <div class="desc-label">所在省市</div>
        <div class="desc-value">{{ account.cArea }}</div>
      </div>

      <div class="desc-item">
        <div class="desc-label">详细地址</div>
        <div class="desc-value">{{ account.cStreet }}</div>
      </div>

      <div class="desc-item">
        <div class="desc-label">联系电话</div>
        <div class="desc-value">{{ account.cPhone }}</div>
      </div>

      <div class="desc-item">
        <div class="desc-label">被授权人姓名</div>
        <div class="desc-value">{{ account.clientName }}</div>
      </div>
    </div>

    <div class="v-title" style="margin-top: 4px;">
      <span>纸质资料</span>
    </div>

    <a-descriptions title="" style="margin-top: 20px;">
      <a-descriptions-item span="2">
        <a @click="preview(account.license)">
          1. 营业执照或律师执照
        </a>
      </a-descriptions-item>
      <a-descriptions-item span="2">
        <a @click="preview(account.legalCard)">
          2. 法人身份证照片
        </a>
      </a-descriptions-item>
      <a-descriptions-item span="2">
        <a @click="preview(account.clientCard)">
          3. 被授权委托人身份证照片
        </a>
      </a-descriptions-item>
      <a-descriptions-item span="2">
        <a @click="preview(account.clientBook)">
          4. 《被授权委托人授权书》
        </a>
      </a-descriptions-item>
      <a-descriptions-item span="2">
        <a @click="preview(account.protoAgree)">
          5. 《会员协议书》
        </a>
      </a-descriptions-item>
      <a-descriptions-item span="2">
        <a @click="preview(account.dpayPic)">
          6. 会员费交款凭证照片
        </a>
      </a-descriptions-item>
    </a-descriptions>

    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  computed: {
    ...mapGetters(["account"])
  },
  data() {
    return {
      previewVisible: false,
      previewImage: ""
    };
  },
  methods: {
    ...mapActions(["getAccountAction"]),
    handleCancel() {
      this.previewVisible = false;
    },
    getRealUrl(url) {
      if (url.indexOf("http") > -1) {
        return url;
      }

      return this.apiUrl + url;
    },
    preview(src) {
      this.previewImage = this.getRealUrl(src);
      this.previewVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.profile {
  background: @white;
  padding: 20px 40px 20px 20px;

  .v-title {
    display: flex;
    justify-content: space-between;

    a {
      font-size: 16px;
    }
  }

  .desc-wrapper {
    padding-left: 20px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

    .desc-item {
      display: flex;
      width: 50%;
      font-size: 15px;
      margin-bottom: 16px;

      .desc-label {
        width: 120px;
        color: @text-color-2;
      }

      .desc-value {
        width: 400px;
      }
    }
  }

  .profile-img {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    padding-right: 50px;
    justify-content: space-around;
  }
}
</style>
